<template>
  <el-drawer
    ref="drawer"
    :visible="show"
    direction="rtl"
    :title="title"
    :size="size"
    :close-on-press-escape="drawerCloseOnEsc"
    :wrapper-closable="drawerWrapperClosable"
    :before-close="onBeforeClose"
  >
    <div v-if="logInfo !== undefined" style="margin-right: 5px; margin-left: 5px;">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="日志信息" name="info">
          <div class="tab-container-content">
            <el-descriptions title="" :column="2" border>
              <el-descriptions-item label="操作对象" label-class-name="ele-label" span="2">{{ logInfo.resName }}</el-descriptions-item>
              <el-descriptions-item label="操作类型" label-class-name="ele-label" content-class-name="ele-content">
                {{ logInfo.operationType }}
              </el-descriptions-item>
              <el-descriptions-item label="操作时间" label-class-name="ele-label">{{ logInfo.createTime }}</el-descriptions-item>
              <el-descriptions-item label="操作" label-class-name="ele-label" span="2">{{ logInfo.operation }}</el-descriptions-item>

              <el-descriptions-item label="操作人学工号" label-class-name="ele-label" content-class-name="ele-content">{{ logInfo.userCode }}</el-descriptions-item>
              <el-descriptions-item label="报错" label-class-name="ele-label" content-class-name="ele-content">
                {{ logInfo.hasError.label }}
              </el-descriptions-item>
              <el-descriptions-item label="调用耗时" label-class-name="ele-label">{{ logInfo.useTime }} ms</el-descriptions-item>

              <el-descriptions-item label="访问链接" label-class-name="ele-label" span="2">{{ logInfo.accessUrl }}</el-descriptions-item>
              <el-descriptions-item label="访问IP" label-class-name="ele-label" span="2">{{ logInfo.visitorIp }}</el-descriptions-item>
              <el-descriptions-item label="调用方法" label-class-name="ele-label" span="2">{{ logInfo.javaMethod }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="业务信息" name="viewInfo">
          <div class="tab-container-content">
            <json-viewer :value="viewInfo" :expand-depth="5" boxed />
          </div>
        </el-tab-pane>

        <el-tab-pane label="请求参数" name="params">
          <div class="tab-container-content">
            <json-viewer :value="requestParams" :expand-depth="5" boxed />
          </div>
        </el-tab-pane>

        <el-tab-pane label="请求响应" name="response">
          <div class="tab-container-content">
            <json-viewer :value="responseData" :expand-depth="5" boxed />
          </div>
        </el-tab-pane>

        <el-tab-pane v-if="logInfo.hasError.value === 'yes' && this.logDetail.error" label="错误信息" name="error">
          <div class="tab-container-content">
            {{ this.logDetail.error }}
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import waves from '@/directive/waves'
import dataApi from '@/api/sys/operationLog.js'
import JsonViewer from 'vue-json-viewer'
let self
export default {
  name: 'OperationLogDetail',
  components: { JsonViewer },
  directives: { waves },
  mixins: [],
  props: {
    logId: {
      type: String,
      default: undefined
    },
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: '65%'
    }
  },
  data() {
    return {
      drawerCloseOnEsc: false,
      drawerWrapperClosable: false,
      title: '',
      logInfo: undefined,
      logDetail: undefined,
      activeTab: 'info',
      requestParams: {},
      responseData: {},
      viewInfo: {}
    }
  },
  created() {
    self = this
    this.drawerCloseOnEsc = this.$appConfig.drawerCloseOnEsc
    this.drawerWrapperClosable = this.$appConfig.drawerWrapperClosable
    self.loadData()
  },
  methods: {
    onBeforeClose() {
      this.$emit('before-close')
    },
    loadData() {
      dataApi.fetch(this.logId).then(response => {
        const { info, detail } = response.data
        this.logInfo = info
        this.logDetail = detail
        this.requestParams = JSON.parse(this.logDetail.params)
        if (this.logDetail.viewInfo) {
          this.viewInfo = JSON.parse(this.logDetail.viewInfo)
        }

        if (this.logDetail.response) {
          this.responseData = JSON.parse(this.logDetail.response)
        }
      })
    }
  }
}
</script>

<style scoped>
  ::v-deep .ele-label {
    width: 120px;
    word-break: keep-all;
  }

  ::v-deep .ele-content {
    word-break: keep-all;
    width: 200px;
    max-width: 200px;
  }

  ::v-deep .jv-container .jv-code.boxed {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
</style>
